<div class="row">

    <div class="col-sm-12">
        <div id="myCarousel" class="carousel fade profile-carousel">
            <div class="air air-bottom-right padding-10">
                <a href="javascript:void(0);" id="editProfile" class="btn txt-color-white bg-color-teal btn-sm"><i class="fa fa-edit"></i> Edit</a>
            </div>
            <div class="air air-top-left padding-10">
                <h4 class="txt-color-white font-md">{$date}</h4>
            </div>
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                <li data-target="#myCarousel" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <!-- Slide 1 -->
                <div class="item active">
                    <img src="img/demo/s1.jpg" style="width: 100%" alt="">
                </div>
                <!-- Slide 2 -->
                <div class="item">
                    <img src="img/demo/s2.jpg" style="width: 100%" alt="">
                </div>
                <!-- Slide 3 -->
                <div class="item">
                    <img src="img/demo/m3.jpg" style="width: 100%" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-12">

        <div class="row">

            <div class="col-sm-3 profile-pic">
                <img src="{$Think.session.user_avatar}">
            </div>
            <div class="col-sm-6">
                <h1>{$user.real_name}</span>
                <br>
                <small> {$job}</small></h1>

                <ul class="list-unstyled">
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-phone"></i>&nbsp;&nbsp;{$user.phone_num}
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-envelope"></i>&nbsp;&nbsp;<a href="mailto:{$user.email}">{$user.email}</a>
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-male"></i>&nbsp;&nbsp;<span class="txt-color-darken">{$user.leader_email}</span>
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-calendar"></i>&nbsp;&nbsp;<span class="txt-color-darken">{$user.lastlogintime}</span>
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-globe"></i>&nbsp;&nbsp;<span class="txt-color-darken">{$user.lastloginip}</span>
                        </p>
                    </li>
                </ul>
                <br>


            </div>
            <div class="col-sm-3">

            </div>

        </div>

    </div>

</div>

<div id="editDialog" title="Edit Info" style="display: none">
    <div class="row">

        <div class="col-sm-12">

            <div class="well">
                <form action="index.php?m=admin&c=User&a=profile" id="edit-form" role="form" method="post" class="smart-form">
                    <fieldset>
                    <section>
                        <label class="input"> 
                            <i class=" icon-prepend fa fa-envelope-o"></i>
                            <input type="email" disabled="disabled" name="email" value="{$user.email}">
                            <b class="tooltip tooltip-bottom-left">{:L('user_email_tip')}</b>
                        </label>
                    </section>
                    <section>
                        <label class="input"> 
                            <i class="icon-prepend fa fa-lock"></i>
                            <input type="password" name="password" value="" placeholder="***">
                            <b class="tooltip tooltip-bottom-left">{:L('user_pwd_tip2')}</b>
                        </label>
                    </section>

                    </fieldset>
                    <fieldset>
                        <div class="row">
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-prepend fa fa-user"></i>
                                    <input type="text" name="real_name" value="{$user.real_name}">
                                    <b class="tooltip tooltip-bottom-left">{:L('user_name_tip')}</b> 
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-prepend fa fa-phone"></i>
                                    <input type="phone" name="phone_num" value="{$user.phone_num}">
                                    <b class="tooltip tooltip-bottom-left">{:L('user_phone_tip')}</b> 
                                </label>
                            </section>
                        </div>  
                        <div class="row">
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-prepend fa fa-male"></i>
                                    <input type="text" name="leader" value="{$user.leader}">
                                    <b class="tooltip tooltip-bottom-left">{:L('user_leader_tip')}</b> 
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-prepend fa  fa-envelope"></i>
                                    <input type="email" name="leader_email" value="{$user.leader_email}">
                                    <b class="tooltip tooltip-bottom-left">{:L('user_leaderemail_tip')}</b> 
                                </label>
                            </section>
                        </div>
                        <div class="row">
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-prepend fa fa-group"></i>
                                    <input type="text" name="department" value="{$user.department}">
                                    <b class="tooltip tooltip-bottom-left">{:L('user_department_tip')}</b>
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="select">
                                    <select name="lang">
                                        <option value="" selected="" disabled="">{:L('user_lang')}</option>
                                        <option value="zh-cn">zh-cn</option>
                                        <option value="en-us">en-us</option>
                                    </select>
                                    <i></i>
                                </label>
                            </section>
                        </div>
                    </fieldset>

                    <footer>
                        <input type="hidden" name="dosubmit" value='1'/>
                        <button type="submit" class="btn btn-primary">
                            {:L('cms_submit')}
                        </button>
                    </footer>
                </form>
                </div>
        </div>
    </div>
</div>
<script>
(function(window,document,undefined) {

    var editDialog = $('#editDialog').dialog({
                        autoOpen : false,
                        width : $('#content').width()*0.8,
                        resizable : false,
                        modal : true,
                        appendTo:'#content'
    });
    var is_first = {$is_first_login};
    if( is_first )
    {
        editDialog.dialog('open');
    }
    $('#editProfile').click(function(){
        editDialog.dialog('open');
    });

    $('#edit-form').ajaxForm(function(data){
        if( data.status!=200)
        {
            alert(data.msg);
            return false;
        }
        editDialog.dialog('close');

        $.smallBox({
                title : "Success!",
                content : data.msg,
                color : "#739E73",
                iconSmall : "fa fa-cloud",
                timeout : 3000
        });
        return false;
    });

})(window,document,undefined);
</script>